<template>
  <div class="completion" >
    
    <Title :isNecessary="question.isNecessary" :no="no" :title="question.title"></Title>
    <div class="option">
      <el-input :model-value="question.content" resize="both"></el-input>
    </div>
    <div v-if="question.qtype == 'exam'">
      <el-alert v-if="isCorrect()"
        :title="'回答正确（+'+question.grade+'分）'"
        type="success"
        :closable="false"
        class="result"
        
        show-icon>
      </el-alert>
      <div v-else>
        <el-alert 
        title="回答错误（+0分）"
        type="error"
        :closable="false"
        class="result"
        show-icon>
        </el-alert>
        <el-alert
          title="正确答案"
          type="success"
          :description="question.correctAnswer"
          class="result"
          :closable="false">
        </el-alert>
      </div>    
      <el-alert v-if="question.resolution != '' && question.resolution != null"
        title="答案解析"
        type="info"
        :description="question.resolution"
        class="result"
        :closable="false">
      </el-alert>  
    </div>  
  </div>
</template>

<script>
import Title from './Title.vue'

export default {
  name:'Completion',
  components: {
    Title,
  },
  data(){
   return {
     
   }
  },
  props: {
    question: {
      type: Object,
      default: {}
    },
    no: {
      type: Number,
      default: 0
    },
  },
  emits: ['changeCompletion'],
  methods: {
    modify() {
      this.question.content = this.input
      this.$emit('changeCompletion', this.question)
    },
    isCorrect() {
      if(this.question.content == this.question.correctAnswer) {
        return true
      }else {
        return false
      }
    },
    
  },
}
</script>

<style scoped src='assets/css/fillcss/completion.css'>
  /* @import url('../css/completion.css'); */
  
</style>
